import React, { Component } from 'react';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { unpateS3Manager } from '../functions/S3Manager';
import {
  readCurrentS3Creadential,
  createConfigFile,
  deleteAccount,
  readConfig,
  updateConfig,
  updateSelectAccountId
} from '../functions/ConfigManager';
import { selectNewAccount } from '../utils/AccountReactor';
import UpdateConfigDialog from '../components/UpdateConfigDialog';
import ConfigList from '../components/ConfigList';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
  listAccount,
  updateAccount,
  deleteAccountAction,
  createAccount,
  selectAccount
} from '../actions/s3account';
import { toggleConfigDialog } from '../actions/configdialog';

import { updateBuckets, startUpdateBuckets } from '../actions/s3bucket';
import { updateKeys } from '../actions/s3key';

class S3ConfigDialogContent extends Component {
  state = {
    config: null,
    bucketNames: null,
    openConfigDiaog: false,
    currentAccount: null
  };

  componentDidMount = () => {
    this.props.readS3AccountList();
  };

  handleOpenCinfigDialog = () => {
    this.setState({ openConfigDiaog: true });
  };

  handleCloseCinfigDialog = () => {
    this.setState({ openConfigDiaog: false, currentAccount: null });
    this.props.readS3AccountList();
  };

  createConfig = () => {
    createConfigFile();
  };

  handleEditAccount = account => {
    this.setState({
      openConfigDiaog: true,
      currentAccount: { ...account }
    });
  };

  handleDeleteAccount = account => {
    this.props.deleteS3Account(account);
  };

  handleSelectAccount = account => {
    this.props.selectS3Account(account);
    this.props.toggleConfigDialogOpen();
  };

  render() {
    const { config, bucketNames, openConfigDiaog, currentAccount } = this.state;

    const {
      accounts,
      readS3AccountList,
      updateS3Account,
      currentId
    } = this.props;

    return (
      <div style={{ minWidth: 300 }}>
        <Button
          variant="contained"
          color="secondary"
          onClick={this.handleOpenCinfigDialog}
        >
          New Account
        </Button>
        <UpdateConfigDialog
          onClose={this.handleCloseCinfigDialog}
          open={openConfigDiaog}
          currentAccount={currentAccount}
          updateS3Account={updateS3Account}
        />

        <ConfigList
          isConfigDialogOpen={openConfigDiaog}
          editAccount={this.handleEditAccount}
          deleteAccount={this.handleDeleteAccount}
          selectAccount={this.handleSelectAccount}
          accounts={accounts}
          currentId={currentId}
        />
      </div>
    );
  }
}

function updateS3AccountList(dispatch) {
  readConfig(currentConfig => {
    const accounts = [...currentConfig.accounts];
    dispatch(listAccount(accounts, currentConfig.currentId));
  });
}

function mapStateToProps(state) {
  return {
    accounts: state.s3account.accounts,
    currentId: state.s3account.currentId
  };
}

function mapDispatchToProps(dispatch) {
  return {
    readS3AccountList: () => {
      updateS3AccountList(dispatch);
    },
    updateS3Account: account => {
      updateConfig(account, () => {
        dispatch(updateAccount(account));
        updateS3AccountList(dispatch);
      });
    },
    deleteS3Account: account => {
      deleteAccount(account, () => {
        dispatch(deleteAccountAction(account));
        updateS3AccountList(dispatch);
      });
    },
    selectS3Account: account => {
      updateSelectAccountId(account, () => {
        const s3Manager = unpateS3Manager(account);
        selectNewAccount(dispatch, account, s3Manager);
        updateS3AccountList(dispatch);
      });
    },
    toggleConfigDialogOpen: () => {
      dispatch(toggleConfigDialog());
    }
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(S3ConfigDialogContent);
